<template>
	<!-- 自定义标题栏 -->
	<div class="header-content">
		<div class="left">
			<div class="logo">
				<img :src="headerRef.logoUrl" draggable="false" />
			</div>
		</div>
		<div class="content">
			<img v-if="projectName" :src="getIcons()" draggable="false" />{{ projectName && projectName + ' — PhotLab' || '' }}
        </div>
		<div class="right">
			<div class="win-tools">
				<pui-icon name="minus" @click="windowToolsClickHandle('PhotAnalyze.min')"></pui-icon>
				<pui-icon name="copy" @click="windowToolsClickHandle('PhotAnalyze.max')"></pui-icon>
				<pui-icon name="close" @click="windowToolsClickHandle('PhotAnalyze.close')"></pui-icon>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, computed } from "vue"
import { commandManager } from '@/common/cmd/manager';
import { useStore } from "vuex"
import { graphManager } from "@/services/phot_client/graph"
const {ipcRenderer} = require('electron')
export default defineComponent({
	name: 'LayoutHeader',
	emits: {
		"sysTypeChange": (val:boolean) => true,
		"onLocaleChange": (val:boolean) => true,
	},
	props: {
		toolbarList: {
			default: []
		}
	},
	setup(props, ctx) {
        const store = useStore()
		const headerRef = reactive({
			logoUrl: require(`@/assets/logo_3.png`)
		})
        const projectName = computed(() => {
            return store.state.sysType === 'system' ? store.state.photGraph.name : store.state.sysType === 'passive_device'? store.state.photGrid.name : store.state.photActiveDevice.name
        })
		// 窗口事件
		const windowToolsClickHandle = (command:string) => {
            let arr = command.split('.')
            let name = arr[0]
            let type = arr[1]
	        ipcRenderer.send(`child-${name}`, type)
            commandManager.executeCommand(command);
		}
        const getIcons = () => {
            return require(`@/assets/file-icon.svg`)
        }
		return {
            store,
			headerRef,
			windowToolsClickHandle,
            getIcons,
            projectName
		}
	}
})
</script>

<style lang="scss" scoped>
.header-content {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ECECFF;
    height: 40px;
    box-sizing: border-box;
    position: relative;
    user-select: none;
    .content {
        height: 100%;
        flex: 1;
        -webkit-app-region: drag;
        z-index: 1;
    }
    .left {
        height: 100%;
        position: relative;
        z-index: 100;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 10px;
        background-color: #ECECFF;
    
    .logo {
        width: 22px!important;
        padding-right: 10px;
        img {
            width: 100%;
        }
    }
    
    }
    .right {
        position: relative;
    z-index: 100;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    .win-tools {
        height: 100%;
        margin-left: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
		.pui-icon {
            font-size: 16px;
            padding: 0 12px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s ease-in-out;
            cursor: pointer;
            &:hover {
                background: #CDD0D6;
            }
        }
    }
    }
}
</style>
